<template>
  <div class="suggest">
    <input
      type="text"
      placeholder="大家都在搜 许嵩"
      @input="getsuggest"
      v-model="value"
      @keyup.enter="keyup"
    />
    <div class="content" v-if="show">
      <p v-for="item in suggestList" :key="item.id" @click="sug(item.name)">
        {{ item.name }}
      </p>
    </div>
    <div v-else>
      <p class="tit">
        <van-icon name="play-circle-o" color="red" size="22" />
        <span>播放全部</span>
      </p>
      <div
        v-for="item in musicList"
        :key="item.id"
        class="songs"
        @click="gosongDetail(item.id)"
      >
        <div class="detail">
          <p class="name">{{ item.name }}</p>
          <p class="singer">
            <span v-for="item2 in item.artists" :key="item2.id"
              >{{ item2.name }} </span
            >-
            <span>{{ item.album.name }}</span>
          </p>
        </div>
        <div class="play">
          <van-icon name="play-circle-o" color="gray" size="20" />
          <van-icon name="more-o" color="gray" size="20" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      suggestList: [],
      show: true,
      musicList: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取关键次检索
    getsuggest() {
      console.log(this.value);
      this.$http
        .get(`http://localhost:3000/search/suggest?keywords=${this.value}`)
        .then((res) => {
          console.log(res);
          this.suggestList = [
            ...res.data.result.albums,
            ...res.data.result.artists,
            ...res.data.result.songs,
          ];
          // this.suggestList = res.data.result.albums.concat(
          //   res.data.result.artists.concat(res.data.result.songs)
          // );
          console.log(this.suggestList);
        });
    },
    sug(name) {
      this.value = name;
    },
    //按下回车后获取信息
    keyup() {
      this.show = false;
      this.$http
        .get(`http://localhost:3000/search?keywords=${this.value}`)
        .then((res) => {
          this.musicList = res.data.result.songs;
          console.log("搜索结果", this.musicList);
        });
    },
    //点击播放歌曲
    gosongDetail(id) {
      // console.log(id);
      this.$router.push(`/songdetail/${id}`);
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
input {
  width: 98%;
  height: 32px;
  line-height: 32px;
  padding: 2px 15px;
  box-sizing: border-box;
  border: none;
  background: rgb(245, 245, 245);
  border-bottom: 1px solid rgb(197, 197, 197);
}
::-webkit-input-placeholder {
  font-size: 13px;
  color: rgb(117, 117, 117);
}
.content {
  margin-top: 10px;
}
.content p {
  padding: 0 10px;
  box-sizing: border-box;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: rgb(82, 82, 82);
}
.content p:hover {
  background: pink;
}
.tit {
  height: 30px;
  display: flex;
  align-items: center;
}
.tit span {
  margin-left: 5px;
  font-size: 14px;
}
.songs {
  display: flex;
  padding: 15px 0;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgb(221, 221, 221);
}
.detail {
  width: 80%;
}
.detail .name {
  font-size: 15px;
  font-weight: 550;
  margin-bottom: 5px;
  color: rgb(48, 47, 47);
}
.detail .singer {
  font-size: 13px;
  color: rgb(83, 83, 83);
}
.detail .singer span:first-child {
  color: rgb(89, 89, 201);
}
.play {
  width: 20%;
  text-align: center;
}
.play .van-icon:last-child {
  margin-left: 5px;
}
</style>
